<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
    
</head>
<body>
    <div id="app">
        <span>姓名 : <input type="text" id="userName"></span> <br>
        <span>年龄 : <input type="text" id="userAge"></span> 
        <span><button type="button" id="addBtn">提交</button></span>
    </div>
    <div>
        <table border="1" width="400" style="border-collapse: collapse;margin-top: 20px;text-align: center;">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            
            </tbody>
        </table>
    </div>
    <script>
            // 获取元素
            let userName = document.getElementById('userName');
            let userAge = document.getElementById('userAge');
            let addBtn = document.getElementById('addBtn');
            let table = document.createElement('table');
            
            getData ();
            // 获取列表数据
            function getData () {
                // xhr 对象
                let xhr = new XMLHttpRequest();
                // 规定请求方式
                xhr.open('GET', 'http://127.0.0.1:3000/list');
                // 发送数据
                xhr.send();
                // 相应数据
                xhr.onreadystatechange = function() {
                    if(xhr.readyState == 4 && xhr.status == 200){
                        console.log('获取成功');
                        var data = JSON.parse(xhr.responseText);
                        // showData(data.info); 
                        showData();
                    }
                }
            }

            // 渲染
            function showData(arr) {
                console.log('arr',arr);
            }












            // // 添加 
            // addBtn.onclick = function() {
            //     if(userName.value == '' || userAge.value == '') {
            //         alert('请完善信息!')
            //         return;
            //     }
            //     console.log('11111111111');
            //     // 创建xhr 对象
            //     let xhr = new XMLHttpRequest();
            //     // 规定请求方式

            //     xhr.open('GET','http://127.0.0.1:3000/add');
            //     // post传参请求头
            //     xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
            //     // 发送数据
            //     xhr.send(`userName=${userName.value}&userAge=${userAge.value}&id=${new Date().getTime()}`);
            //     // 相应数据
            //     xhr.onreadystatechange = function() {
            //         if(xhr.readyState == 4 && xhr.status == 200) {
            //             var data = JSON.parse(xhr.responseText);
            //             console.log(data);
            //             if(data.code = 200){
            //                 console.log('添加成功');
            //                 getData();
            //                 userName.value == userAge.value == '';
            //             } else {
            //                 alert(data.msg);
            //             } 
            //         }
            //     }
            // }
    </script>
</body>
</html>